<script>
/*
 * @Author: Your name
 * @Date:   2020-07-21 16:44:42
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-07-22 10:02:32
 */
</script>
<template>
  <div id="detailParams" v-if="Object.keys(detailParamsInfo).length != 0">
    <!-- 判断在有数据的时候进行渲染 -->
    <div class="header-container">
      <div class="header">
        <p class="header-title">{{detailParamsInfo.key}}</p>
        <p class="header-info">{{detailParamsInfo.disclaimer}}</p>
      </div>
    </div>

    <div class="rules">
      <table class="table-size" v-for="(table, index) in detailParamsInfo.table" :key="index">
        <tr v-for="(tr, indey) in table" :key="indey">
          <td v-for="(td, indez) in tr" :key="indez">{{td}}</td>
        </tr>
      </table>
      <table class="table-params" v-for="(paramsitem) in detailParamsInfo.paramsTable" :key="'1'+paramsitem">
        <tr v-for="paramsitem1 in paramsitem" :key="'1'+paramsitem1">
          <td v-for="paramsitem2 in paramsitem1" :key="'1'+paramsitem2">{{paramsitem2}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DetailParamsInfo',
  props: {
    detailParamsInfo: {
      type: Object,
      default(){
        return {}
      }
    }
  }
}
</script>
<style lang="css">
  #detailParams{
    width: 100%;
    padding: 20px 5px;
    background: #ffffff;
  }
  #detailParams .header-container{
    width: 100%;
  }
  #detailParams .header-container .header{
    border-left: 5px solid var(--color-high-text);
    padding: 5px 0px 5px 10px;
  }

  #detailParams .header-container .header .header-title{
    font-size: 13px;
    color: var(--color-high-text);
    line-height: 22px;
  }
  #detailParams .header-container .header .header-info{
    font-size: 10px;
    color: #333;
    line-height: 15px;
  }
  #detailParams .rules{
    padding: 20px 5px 10px 5px;
    border-top: 2px solid rgba(100,100,100,.1);
    border-bottom: 2px solid rgba(100,100,100,.1);
    margin-top: 30px;
  }

  #detailParams .rules table{
    font-size: 13px;
    /* width: 100%; */
    border-collapse: collapse;
  }
  #detailParams .rules table tr{
    height: 42px;
  }
  #detailParams .rules .table-size tr td{
    border-bottom: 1px solid rgba(100,100,100,.1);
    width:60px;
  }
  #detailParams .rules .table-size tr td:first-child{
    color: var(--color-high-text);
  }
  #detailParams .rules .table-params{
    width: 100%;
  }
  #detailParams .rules .table-params tr td{
    border-bottom: 1px solid rgba(100,100,100,.1);
  }
  #detailParams .rules .table-params tr td:first-child{
    
    width: 95px;
  }
  #detailParams .rules .table-params tr td:nth-child(2){
    color: var(--color-high-text);
  }
  
</style>